<template>
  <!-- 滚动容器，可根据实际需求调整滚动方向等 -->
  <scroll-view class="scroll-container" scroll-y>
    <!-- 头像及输入框区域 -->
    <view class="header-wrapper">
      <!-- 点击头像占位符触发上传 -->
      <view 
        class="avatar-placeholder" 
        @click="chooseImage"
      >
        <!-- 若已上传头像则显示图片，否则显示占位样式 -->
        <image 
          class="avatar" 
          :src="avatarUrl" 
          v-if="avatarUrl"
        ></image>
        <view class="placeholder" v-else>
          点击上传头像
        </view>
      </view>
      <input 
        class="input-box" 
        v-model="groupName" 
        :maxlength="10" 
        placeholder="群名称群名称"
      />
    </view>

    <!-- 用户列表标题 -->
    <view class="user-list-title">用户</view>
    <!-- 用户列表项，循环渲染 -->
    <view 
      class="user-item" 
      v-for="(item, index) in userList" 
      :key="index" 
      @click="handleUserClick(index)"
    >
      <view 
        class="check-circle" 
        :style="{ backgroundColor: item.checked ? '#FDD835' : '#F5F5F5' }"
      >
        <text class="check-icon" v-if="item.checked">✔</text>
      </view>
      <image class="user-avatar" :src="item.avatar"></image>
      <text class="user-name">{{ item.name }}</text>
      <view class="spacer"></view>
    </view>
  </scroll-view>

  <!-- 底部固定创建群聊按钮 -->
  <view class="fixed-bottom">
    <view class="create-btn" @click="createGroup">
      创建群聊({{ selectedCount }})
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 头像地址，初始为空，上传后赋值
const avatarUrl = ref(''); 
// 群名称绑定变量
const groupName = ref(''); 
// 用户列表模拟数据，可根据实际接口返回调整
const userList = ref([
  { name: '开发的实', avatar: '/static/logo.png', checked: true },
  { name: '的实', avatar: '/static/logo.png', checked: false },
  { name: '发对方的身份', avatar: '/static/logo.png', checked: true },
  { name: '花开那支头', avatar: '/static/logo.png', checked: false },
  { name: '春水流', avatar: '/static/logo.png', checked: false },
  { name: '夸夸大', avatar: '/static/logo.png', checked: false },
  { name: '春水流', avatar: '/static/logo.png', checked: false },
  { name: '夸夸大', avatar: '/static/logo.png', checked: false },
]); 

// 计算选中用户数量
const selectedCount = computed(() => {
  return userList.value.filter(item => item.checked).length;
});

// 处理用户点击切换选中状态
const handleUserClick = (index) => {
  userList.value[index].checked = !userList.value[index].checked;
};

// 模拟创建群聊逻辑，可替换为真实接口调用
const createGroup = () => {
  uni.showToast({
    title: `创建群聊: ${groupName.value || '新群'} (${selectedCount.value}人)`,
    icon: 'none'
  });
};

// 选择图片（上传头像）方法
const chooseImage = () => {
  uni.chooseImage({
    count: 1, // 每次只允许选1张
    sizeType: ['original', 'compressed'], // 可以选原图或压缩图
    sourceType: ['album', 'camera'], // 可以从相册选或相机拍
    success: (res) => {
      // 选择成功，获取临时文件路径，赋值给avatarUrl显示
      avatarUrl.value = res.tempFilePaths[0];
    },
    fail: (err) => {
      console.error('选择图片失败', err);
      uni.showToast({
        title: '选择图片失败，请重试',
        icon: 'none'
      });
    }
  });
};
</script>

<style lang="less" scoped>
/* 滚动容器样式，设置高度让内容可滚动，隐藏滚动条 */
.scroll-container {
  height: calc(100vh - 120rpx); /* 减去底部按钮高度，可按需调整 */
  overflow-y: auto;
  /* 隐藏滚动条，多端兼容写法 */
  ::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 头像和输入框外层容器，用于布局 */
.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 130rpx; /* 给头像留出上方空间 */
}

/* 头像占位符容器，用于触发上传 */
.avatar-placeholder {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  position: absolute;
  top: 60rpx; /* 头像高度一半，实现垂直居中在输入框上边框中间 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border: 2rpx dashed #ccc;
  cursor: pointer;
}

/* 已上传的头像样式 */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
  object-fit: cover; /* 确保图片填充且不失真 */
}

/* 未上传时的占位提示文本样式 */
.placeholder {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  padding: 0 10rpx;
}

/* 输入框样式，设置上边距让头像有“悬浮”在上方中间的效果 */
.input-box {
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-top: 80rpx; /* 与头像配合，让头像在输入框上边框中间 */
}

/* 用户列表标题样式 */
.user-list-title {
  margin: 40rpx 0 20rpx 30rpx;
  font-size: 32rpx;
  font-weight: bold;
}

/* 用户列表项样式 */
.user-item {
  display: flex;
  align-items: center;
  margin: 0 30rpx 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.user-item:active {
  transform: scale(0.98);
}

/* 选中圆圈样式 */
.check-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  border: 2rpx solid #ccc;
  flex-shrink: 0;
}
.check-icon {
  color: #fff;
  font-size: 24rpx;
}

/* 用户头像样式 */
.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

/* 用户名样式 */
.user-name {
  font-size: 28rpx;
  flex-grow: 1;
}

.spacer {
  flex-grow: 1;
}

/* 底部固定按钮容器样式 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 创建群聊按钮样式 */
.create-btn {
  background-color: #FDD835;
  color: #333;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(253, 216, 53, 0.4);
  transition: all 0.3s ease;
}
.create-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(253, 216, 53, 0.4);
}
</style>